<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../../dist/layui/layui.js"></script>
		<script src="../../dist/layui/jquery-3.5.0.js"></script>
		<link rel="stylesheet" type="text/css" href="../../dist/layui/css/layui.css"/>
		<link rel="stylesheet" type="text/css" href="../../dist/layui/css/time.css" />
      
	</head>
	<body>
		<div class="general">
			  <!-- logo -->
			  <div class="logo"><img src="../../dist/layui/image/logo.png" alt=""></div>
			  <div class="menuItem-right">
				  <div class="menuItem-right">
					  <ul>
						  <li><a href="General.html">基本概况</a></li>
						  <li><a href="map_shower.html">生态评估</a></li>
						  <li  class="on"><a href="Analysis.html">分析预测</a></li>
						  <!-- <li>更多</li> -->
						  <li class="names">你好</li>
						  <li style="cursor: pointer;" onclick="logout()">退出</li>
					  </ul>
				  </div>
			  </div>
		</div>
		
		<div class="analysis">
			<div class="layui-carousel" id="test1" style="height: 370px;">
				<div carousel-item>
				  <div><img src="../../dist/layui/image/pic6.jpg" alt="" width="1100" ></div>
				  <div><img src="../../dist/layui/image/pic7.jpg" alt="" width="1100"></div>
				  <div><img src="../../dist/layui/image/pic8.jpg" alt=""  width="1100"></div>
				</div>
			  </div>
		</div>
		<div class="analysis-top"> 
			<div class="analysis-top-left">
				<p class="tit">固碳释氧预测</p>
				<p class="analysis-top-left-content">
					根据二调数据显示，当前帽儿山地区的平均树龄为45岁，以2016年二调数据中的造林区域为例,当前植树造林总面积为2872.71 ，考虑2020年对区域种植落叶落叶林、常绿针叶林、落叶针叶林幼苗，则40年后单位面积的固碳释氧量分别如图所示(单位：t/ha)：
				</p>
			</div>
			<div class="analysis-top-right">
				<div id="echattsl" style="width:470px;height:350px;margin-top: 40px;"></div>
				
			</div>
			
			<div class="analysis-maps">
				<p>以此为依据，我们推算出40年后每年固碳释氧量增加可以通过三种植被类型的比例进行预测，预测结果如下(单位：t)</p>
				<div id="gtMap" style="width:700px;height:500px;margin: 0 auto;margin-top: 25px;"></div>
				<p class="tit">固碳预测</p>
				<div id='mapsI' style="width:700px;height:500px;margin: 0 auto;margin-top: 25px;"></div>
				<p class="tit">释氧预测</p>
			</div>
			<div class="analysis-center">
				<p class="tit">生态补偿价值计算</p>
				<div class="main-one-value">
					<div>
						<p class="main-one-value-p">3236万元</p>
						<p class="main-one-value-p" style="color: #797979;font-size: 16px;font-weight: 100;padding-top: 10px;">2018年生态价值总量</p>
					</div>
					<div>
						<p class="main-one-value-p">2879万元</p>
						<p class="main-one-value-p" style="color: #797979;font-size: 16px;font-weight: 100;padding-top: 10px;">2019年生态价值总量</p>
					</div>
				</div>
			</div>
			<div class="analysis-bottom">
				<div class="analysis-bottom-left">
					<p class="tit" style="font-size: 20px; font-weight: 100;">折算因子</p>
					<p class="cons">
						根据帽儿山地区当前的生态价值来进行生态补偿，从而更加合理地对土地进行利用与保护。首先根据每个林场的实际状况对林场进行综合评估，确定该区域的重要性与稳定性：
					</p>
				</div>
				<div class="analysis-bottom-right">
					<div  id='maps' style="width:550px;height:300px; margin-top: 50px;"></div>
					
				</div>
			</div>
			<div class="analysis-bottom">
				<div class="analysis-bottom-left">
					<p class="tit" style="font-size: 20px; font-weight: 100;">生态补偿价值</p>
					<p class="cons">
						以二者为依据，来进行折算，从而得出每个林场2018年和2019年的理论补偿值：
					</p>
				</div>
				<div class="analysis-bottom-right">
					<div  id='maps2' style="width:550px;height:300px; margin-top: 50px;"></div>
				</div>
			</div>
		</div>
		<script src="../../dist/layui/echarts.min.js"></script>
		<script src="../../dist/layui/echartsMap.js"></script>
		<script src="../../dist/layui/layui.js"></script>
		<script>
			
		    layui.use('carousel', function(){
				var carousel = layui.carousel;
				//建造实例
				carousel.render({
					elem: '#test1'
					,width: '1100px' //设置容器宽度
					,arrow: 'always' //始终显示箭头
					,indicator: 'outside' //切换动画方式
					,height:'370px'
					
				});
			});
			echsa()
			maps()
			gtMap()
			maps2()
			mapsI()
			if(JSON.parse(window.localStorage.getItem('nickname'))){
				$('.names').html(JSON.parse(window.localStorage.getItem('nickname'))+ ' 你好')
			}else{
				$('.names').html( '用户未登陆')
			}
			//生成饼图
			function echsa(){
				var myChart = echarts.init(document.getElementById('echattsl'));
				 //指定图表的配置项和数据
				 myChart.clear();
                    var option = {
						
						color: ['#07a1a3','#ff524c'],
                        legend: {
							x: '80%' //居右显示
						},
						tooltip: {},
						dataset: {
							dimensions: ['product', '固碳单位', '释氧单位'],
							source: [
								{product: '落叶阔叶林', '固碳单位':4.96679377980957,'释氧单位': 13.2968984215288 },
								{product: '常绿针叶林', '固碳单位':5.73445896988832, '释氧单位': 15.3520604650417},
								{product: '落叶针叶林', '固碳单位': 5.0273644356609, '释氧单位': 13.4590557193523},
							]
						},

						xAxis: {type: 'category'},
						yAxis: {
							axisLabel:{
								formatter:'{value} t'
							}
						},
						// Declare several bar series, each will be mapped
						// to a column of dataset.source by default.
						series: [
							{type: 'bar'},
							{type: 'bar'},
					
						]
                    };
                    myChart.hideLoading();
                    //使用刚指定的配置项和数据显示图表
                    myChart.setOption(option);
			}
			function maps(){
				var myChart = echarts.init(document.getElementById('maps'));
				myChart.clear();
				var option ={
					// title: {
					// 	text: '折线图堆叠'
					// },
					tooltip: {
						trigger: 'axis'
					},
					legend: {
						data: ['重要性', '稳定性']
					},
					color:['#65a1d8','#ec7524'],
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					// toolbox: {
					// 	feature: {
					// 		saveAsImage: {}
					// 	}
					// },
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: ['太平', '新垦', '跃进', '中林', '北林', '东林', '尖砬沟', '老山', '老爷岭', '蜜蜂']
					},
					yAxis: {
						type: 'value'
					},
					series: [
						{
							
							name: '重要性',
							type: 'line',
							stack: '总量',
							data: [0.282643312101911, 0.291906130268199, 0.284821428571429, 0.332175925925926, 0.344322344322344, 0.319220430107527, 0.359782608695652,0.203343023255814,0.342760180995475,0.247632575757576]
						},
						{
							
							name: '稳定性',
							type: 'line',
							stack: '总量',
							data: [0.276993630573248, 0.352057471264367, 0.314114285714286, 0.237433333333333, 0.294813186813187, 0.262508064516129, 0.175930434782609,0.228376744186046,0.366298642533936,0.209212121212122]
						},
						
					]
				}
				myChart.setOption(option);
			}
			function maps2(){
				var myChart = echarts.init(document.getElementById('maps2'));
				myChart.clear();
				var option ={
					// title: {
					// 	text: '折线图堆叠'
					// },
					tooltip: {
						trigger: 'axis'
					},
					color:['#65a1d8','#ec7524'],
					legend: {
						data: ['2018年', '2019年']
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					// toolbox: {
					// 	feature: {
					// 		saveAsImage: {}
					// 	}
					// },
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: ['太平', '新垦', '跃进', '中林', '北林', '东林', '尖砬沟', '老山', '老爷岭', '蜜蜂']
					},
					yAxis: {
						type: 'value'
					},
					series: [
						{
							name: '2018年',
							type: 'line',
							stack: '总量',
							data: [1840438.25565922, 1724563.28904655, 3906928.61288242, 2456410.94146067, 4986502.71435323, 3066494.73957053, 4193913.69045166,3860260.51145979,4671375.56404465,1656226.7338614]
						},
						{
							name: '2019年',
							type: 'line',
							stack: '总量',
							data: [1651938.63138245, 1544236.77660425, 3528938.37017539, 2160451.03048135, 4542271.36296342, 2709808.01520563, 3686515.11588204,3374636.21621615,4150445.88969753,1447466.96966413]
						},
						
					]
				}
				myChart.setOption(option);
			}
			function gtMap(){
				var myChart = echarts.init(document.getElementById('gtMap'));
				 //指定图表的配置项和数据
				 myChart.clear();
				 var option = {
					
					tooltip: {
						trigger: 'item',                            //触发类型,'item'数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。 'axis'坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
						triggerOn:"mousemove",                      //提示框触发的条件,'mousemove'鼠标移动时触发。'click'鼠标点击时触发。'mousemove|click'同时鼠标移动和点击时触发。'none'不在 'mousemove' 或 'click' 时触发
						showContent:true,                           //是否显示提示框浮层
						// alwaysShowContent:true,                     //是否永远显示提示框内容
						// showDelay:0,                                  //浮层显示的延迟，单位为 ms
						// hideDelay:100,                                //浮层隐藏的延迟，单位为 ms
						// enterable:false,                             //鼠标是否可进入提示框浮层中
						// confine:false,                               //是否将 tooltip 框限制在图表的区域内
						// transitionDuration:0.4,                      //提示框浮层的移动动画过渡时间，单位是 s,设置为 0 的时候会紧跟着鼠标移动
						// position:['50%', '50%'],                    //提示框浮层的位置，默认不设置时位置会跟随鼠标的位置,[10, 10],回掉函数，inside鼠标所在图形的内部中心位置，top、left、bottom、right鼠标所在图形上侧，左侧，下侧，右侧，
						//formatter:"落叶阔叶林占比: {c0(0)} <br />{常绿针叶林占比}: '{value}' <br />{落叶针叶林占比}: {value}",     //提示框浮层内容格式器，支持字符串模板和回调函数两种形式,模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等
						// backgroundColor:"transparent",            //标题背景色
						formatter:function (params) {
							//console.log(params,222)
							// return  '落叶阔叶林占比: '+ params.data[0] +'</br>'+'常绿针叶林占比: '+ params.data[1] +'</br>'+'落叶针叶林占比: '+ params.data[2]

							return  '落叶阔叶林占比: '+ params.data[0].toFixed(2) + '%' +'</br>'+'常绿针叶林占比: '+ params.data[1] .toFixed(2) + '%' +'</br>'+'落叶针叶林占比: '+ (1-params.data[0].toFixed(2) - params.data[1] .toFixed(2)).toFixed(2)+'%'+'</br>'+'固碳量: '+ params.data[2].toFixed(2)+'t'
						},
						borderColor:"#ccc",                        //边框颜色
						borderWidth:0,                              //边框线宽
						padding:8,                                  //图例内边距，单位px  5  [5, 10]  [5,10,5,10]
						// textStyle:mytextStyle,                     //文本样式
					},
					backgroundColor: '#f6f6f6',
					visualMap: {
						show: false,
						dimension: 2,
						min: 14268.15816,
						max: 16473.43763,
						inRange: {
							color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
						}
					},
					xAxis3D: {
						type: 'value',
						name:'落叶阔叶林占比',//坐标轴名称
						grid3DIndex:0,//坐标轴使用的 grid3D 组件的索引
						min: 0,
						max: 1,
					},
					yAxis3D: {
						type: 'value',
						name:'常绿针叶林占比',//坐标轴名称
						grid3DIndex:0,//坐标轴使用的 grid3D 组件的索引
						min: 0,
						max: 1,
					},
					zAxis3D: {
						type: 'value',
						name:'固碳增加量',//坐标轴名称
						grid3DIndex:0,//坐标轴使用的 grid3D 组件的索引
					},
					grid3D: {
						viewControl: {
							// projection: 'orthographic'
						}
					},
					series: [{
						type: 'surface',
						wireframe: {
							// show: false
						},
						center : [ '20%', '20%' ],
						equation: {
							x: {
								step: 0.01,
							},
							y: {
								step: 0.01
							},
							z: function (x, y) {
								if ((x+y)>=1 || x<0 ||y <0) {
									return '-';
								}
							return 14268.15816*x+16473.43763*y+14442.1600-14442.16009*x-14442.16009*y;
							}
						}
					}]
				 }
                //使用刚指定的配置项和数据显示图表
                 myChart.setOption(option);
			}
			function  mapsI(){
				var myChart = echarts.init(document.getElementById('mapsI'));
				 //指定图表的配置项和数据
				 myChart.clear();
				var option = {
						tooltip: {
						trigger: 'item',                            //触发类型,'item'数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。 'axis'坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
						triggerOn:"mousemove",                      //提示框触发的条件,'mousemove'鼠标移动时触发。'click'鼠标点击时触发。'mousemove|click'同时鼠标移动和点击时触发。'none'不在 'mousemove' 或 'click' 时触发
						showContent:true,                           //是否显示提示框浮层
						// alwaysShowContent:true,                     //是否永远显示提示框内容
						// showDelay:0,                                  //浮层显示的延迟，单位为 ms
						// hideDelay:100,                                //浮层隐藏的延迟，单位为 ms
						// enterable:false,                             //鼠标是否可进入提示框浮层中
						// confine:false,                               //是否将 tooltip 框限制在图表的区域内
						// transitionDuration:0.4,                      //提示框浮层的移动动画过渡时间，单位是 s,设置为 0 的时候会紧跟着鼠标移动
						// position:['50%', '50%'],                    //提示框浮层的位置，默认不设置时位置会跟随鼠标的位置,[10, 10],回掉函数，inside鼠标所在图形的内部中心位置，top、left、bottom、right鼠标所在图形上侧，左侧，下侧，右侧，
						formatter:function (params) {
							//console.log(params,222)
							return  '落叶阔叶林占比: '+ params.data[0].toFixed(2) + '%' +'</br>'+'常绿针叶林占比: '+ params.data[1] .toFixed(2) + '%' +'</br>'+'落叶针叶林占比: '+ (1-params.data[0].toFixed(2) - params.data[1] .toFixed(2)).toFixed(2)+'%'+'</br>'+'释氧量: '+ params.data[2].toFixed(2)+'t'
						},
						
						// backgroundColor:"transparent",            //标题背景色
						borderColor:"#ccc",                        //边框颜色
						borderWidth:0,                              //边框线宽
						padding:8,                                  //图例内边距，单位px  5  [5, 10]  [5,10,5,10]
						// textStyle:mytextStyle,                     //文本样式
						},
						
						backgroundColor: '#f6f6f6',
						visualMap: {
							show: false,
							dimension: 2,
							min: 38198.13306,
							max: 44102.01762,
							inRange: {
								color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
							}
						},
						xAxis3D: {
							type: 'value',
							name:'落叶阔叶林占比',//坐标轴名称
							grid3DIndex:0,//坐标轴使用的 grid3D 组件的索引
							min: 0,
							max: 1,
						},
						yAxis3D: {
							type: 'value',
							name:'常绿针叶林占比',//坐标轴名称
							grid3DIndex:0,//坐标轴使用的 grid3D 组件的索引
							min: 0,
							max: 1,
						},
						zAxis3D: {
							type: 'value',
							name:'释氧增加量',//坐标轴名称
							grid3DIndex:0,//坐标轴使用的 grid3D 组件的索引
						},
						grid3D: {
							viewControl: {
								// projection: 'orthographic'
							}
						},
						series: [{
							type: 'surface',
							wireframe: {
								// show: false
							},
							center : [ '50%', '10%' ],
							equation: {
								x: {
									step: 0.01,
								},
								y: {
									step: 0.01
								},
								z: function (x, y) {
									if ((x+y)>=1 || x<0 ||y <0) {
										return '-';
									}
									return 38198.13306*x+44102.01762*y+38663.96396-38663.96396*x-38663.96396*y;
								}
							}
						}]
					}
				//使用刚指定的配置项和数据显示图表
				myChart.setOption(option);
			}
			function logout(){
                let self = this
                $.ajax({
                    type: "get",
                    url: '/linda/logout',
                    dataType: "json",
                    contentType: "application/json",
                    // xhrFields: {
                    //     withCredentials: true
                    // },
                    xhrFields: {
                        withCredentials: true
                    },
                    success: function (data) {
                        if (data.code == 200) {
                            window.location.href = '/load.html'
                            window.localStorage.removeItem('nickname')
                        } else {
                            console.log('出现错误')
                        }
                    },
                    error: function (jqXHR) {
                        alert("发生错误");
                    },
                });
             }
		</script>
	</body>
</html>

